<template>
	<div class="nav">

		<div>
			<el-carousel :interval="4000" type="card" height="200px">
				<el-carousel-item>
					<img src="../../assets/l1.png"></img>
				</el-carousel-item>
				<el-carousel-item>
					<img src="../../assets/l2.png"></img>
				</el-carousel-item>
				<el-carousel-item>
					<img src="../../assets/l3.png"></img>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div>
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="汉堡包" name="first">
					<div>
						<el-row>
							<el-col>
								<el-card>
									<img src="../../assets/hbb1.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
								<el-card>
									<img src="../../assets/hbb1.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane label="可乐" name="second">
					<div>
						<el-row>
							<el-col>
								<el-card>
									<img src="../../assets/kl1.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
								<el-card>
									<img src="../../assets/kl2.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane label="鸡翅" name="third">
					<div>
						<el-row>
							<el-col>
								<el-card>
									<img src="../../assets/jc1.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
								<el-card>
									<img src="../../assets/jc2.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane label="薯片" name="fourth">
					<div>
						<el-row>
							<el-col>
								<el-card>
									<img src="../../assets/sp1.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
								<el-card>
									<img src="../../assets/sp2.png" class="image" @click="drawer = true" type="primary" style="margin-left: 16px;">
								</el-card>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="fs">
			<el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" style="width: ">
				<span>商品详情</span>
				<img src="../../assets/l1.png" class="is">
				<p>北海湾香煎大鸡排油炸小吃半成品冷冻汉堡包炸鸡鸡扒10片商用批发</p>
				<span>￥15元</span>
				<el-input-number v-model="num" @click="handleChange"></el-input-number>
				<el-button type="primary" @click='goCart'>加入购物车</el-button>
			</el-drawer>
		</div>
		<div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%">
			</el-table>
		</div>
	</div>

</template>
<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				activeName: 'first',
				drawer: false,
				num: 1
			};
		},
		methods: {
			handleClick() {
				if (this.num == 10) {
					this.$alert('提交成功', '状态', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					});
				}

			},
			goCart() {

				this.$router.push('/login');

			},
			handleChange(value) {
				console.log(value);
			}
		}
	}
</script>

<style>
	.is {
		width: 80px;
		height: 80px;
	}

	p {
		font-size: 12px;
		color: #0570DB;

	}

	span {
		font-size: 16px;
		color: red;
	}

	.fs {
		float: right;
		position: relative;
	}

	.nav {
		height: 1700px;
	}

	.el-carousel__item h3 {

		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 500px;
		height: 600px;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
